import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Space, Row, Col, Typography, InputNumber, DatePicker } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const { TextArea } = Input;
const { Title } = Typography;

/**
 * @description: 添加合同-添加产品信息
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-08-09） 添加备注
 */

const ItemMaterials = ({materialPrice = [],  handleAllMoney }) => {
    const [allMoney, setAllMoney] = useState([]);
    const [allMoneyData, setAllMoneyData] = useState([]);
    useEffect(() => {

    }, [ ])
    //获取单价
    const handlePrice = (value, key) => {
        let newArray = [...allMoneyData];
        let allMoneyNewArray = [...allMoney];
        if(!newArray[key]) {
            newArray[key] = {
                price: value,
                number: 0
            }
        }
        newArray[key].price = value;
        allMoneyNewArray[key] = value * newArray[key].number;
        setAllMoney(allMoneyNewArray);
        setAllMoneyData(newArray);
        handleAllMoney(allMoneyNewArray)
    };
    //获取数量
    const handleNumber = (value, key) => {
        let newArray = [...allMoneyData];
        let allMoneyNewArray = [...allMoney];
        if(!newArray[key]) {
            newArray[key] = {
                price: 0,
                number: value
            }
        }
        newArray[key].number = value;
        allMoneyNewArray[key] = value * newArray[key].price;
        setAllMoney(allMoneyNewArray);
        setAllMoneyData(newArray);
        handleAllMoney(allMoneyNewArray)
    };
    return (
        <>
            <Title level={3}>产品信息</Title>
            <Row key="5">
                <Col span={24}>
                    <Form.List name="pdPlan">
                        {(fields, { add, remove }) => (
                            <>
                                {fields.map(({ key, name, fieldKey, ...restField }, index) => (
                                    <Space key={key} align="baseline">
                                        <Row className="item-materials-row">
                                            <Col span={24}>
                                                <Form.Item
                                                    label="产品型号"
                                                    name={[name, 'product']}
                                                    fieldKey={[fieldKey, 'product']}
                                                    rules={[{ required: true, message: '请填写产品型号！' }]}
                                                >
                                                    <Input />
                                                </Form.Item>
                                            </Col>
                                            <Col span={24}>
                                                <Form.Item
                                                    label="单价（元）"
                                                    name={[name, 'price']}
                                                    fieldKey={[fieldKey, 'price']}
                                                    rules={[{ required: true, message: '请填写单价！' }]}
                                                >
                                                    <InputNumber onChange={value => handlePrice(value, key)} />
                                                </Form.Item>
                                            </Col>
                                            <Col span={24}>
                                                <Form.Item
                                                    label="数量"
                                                    name={[name, 'amount']}
                                                    fieldKey={[fieldKey, 'amount']}
                                                    rules={[{ required: true, message: '请填写数量！' }]}
                                                >
                                                    <InputNumber onChange={value => handleNumber(value, key)} />
                                                </Form.Item>
                                            </Col>
                                            <Col span={24}>
                                                <Form.Item
                                                    label="计划生产时间"
                                                    name={[name, 'antStartDate']}
                                                    fieldKey={[fieldKey, 'antStartDate']}
                                                    rules={[{ required: true, message: '请选择计划生产时间！' }]}
                                                >
                                                    <DatePicker />
                                                </Form.Item>
                                            </Col>
                                            <Col span={24}>
                                                <Form.Item
                                                    label="计划发货时间"
                                                    name={[name, 'antEndDate']}
                                                    fieldKey={[fieldKey, 'antEndDate']}
                                                    rules={[{ required: true, message: '请选择计划发货时间！' }]}
                                                >
                                                    <DatePicker />
                                                </Form.Item>
                                            </Col>
                                            <Col span={24}>
                                                <Form.Item
                                                    label="备注"
                                                    name={[name, 'remake']}
                                                    fieldKey={[fieldKey, 'remake']}
                                                >
                                                    <TextArea />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                        <MinusCircleOutlined onClick={() => remove(name)} />
                                    </Space>
                                ))}
                                <Form.Item className="item-materials-button">
                                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                        添加产品信息
                                    </Button>
                                </Form.Item>
                            </>
                        )}
                    </Form.List>
                </Col>
            </Row>
        </>
    )
}


export default ItemMaterials;